<template>
    <div class="page notTab">
        <Header> 产品详情 </Header>
        <div class="info" v-if="info.name">
            <div class="proImg" v-if="info.photo">
                <swiper
                    :indicator-dots="true"
                    :interval="5000"
                    style="height: 750rpx"
                    circular
                    indicator-color="#FAFAFA"
                    indicator-active-color="#65D9BE"
                >
                    <swiper-item
                        :key="index"
                        v-for="(i, index) in info.photo.split(',')"
                    >
                        <Nimg
                            :src="info.img_src + i"
                            mode="aspectFill"
                            width="750"
                            height="750"
                        />
                    </swiper-item>
                </swiper>
            </div>
            <div class="jbxx">
                <div class="name">{{ info.name }}</div>
                <div class="price fx aife">
                    {{ info.price }}
                    <div class="dw">元</div>
                </div>
                <div class="ms">快递包邮</div>
                <button
                    open-type="share"
                    hover-class="btn-hover"
                    class="share fx"
                >
                    <div class="icon">
                        <Nimg src="008.png" width="31" height="31" />
                    </div>
                    分享
                </button>
            </div>
            <div class="cpzs">
                <div class="title">产品展示</div>
                <div class="pro_intro">
                    <rich-text :nodes="info.content"></rich-text>
                </div>
            </div>
            <div style="height: 165rpx"></div>
            <div class="xbottom fx">
                <div class="price fx aife">
                    {{ info.price }}
                    <div class="dw">元</div>
                </div>
                <div class="fx1"></div>

                <div
                    v-if="!i.isFenxiao"
                    @click.stop="fenxiaoNow(id)"
                    class="btn fx jcc"
                >
                    一键分销
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "@/common";
export default {
    data() {
        return {
            id: "",
            addr_id: "",
            info: {},
        };
    },
    methods: {
        fenxiaoNow(product_id) {
            let url = $.product("addProduct");
            let data = {
                product_id,
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                this.updateFenxiaoList();
            });
        },
        getDetail() {
            let url = $.product("productDetail");
            let data = {
                product_id: this.id,
            };
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                res.content = res.content.replace(
                    /src="\/ttj\/admin\/kindeditor\//gi,
                    'style="max-width:100%;" src="' +
                        $.domain +
                        "/admin/kindeditor/"
                );
                this.info = res;
            });
        },
        buyNow() {
            let url = `confirmOrder?id=${this.id}&num=1`;
            $.login(() => {
                $.$go(url);
            });
        },
    },
    onLoad(op) {
        this.id = op.id;
        if (op.user_id) {
            $.setLocal("tuijianren", op.user_id);
        }
        this.getDetail();
    },
    onShareAppMessage: function (res) {
        let userId = $.getLocal("userId");
        let title = this.info.name;
        let path = "/pages/productInfo?id=" + this.id + "&user_id=" + userId;
        let imageUrl =
            $.domain + this.info.img_src + this.info.photo.split(",")[0];

        return {
            title,
            path,
            imageUrl,
        };
    },
};
</script>

<style lang="less" scoped>
.page {
    background: #f7f7f7;
    padding-bottom: 185rpx;
}

.jbxx {
    background: #ffffff;
    margin: 0 auto;
    padding: 50rpx 46rpx;
    position: relative;
    .price {
        color: #f62715;
        font-weight: bold;
        font-size: 42rpx;
        .dw {
            font-size: 24rpx;
            color: #999999;
            margin-left: 12rpx;
            font-weight: normal;
            line-height: 1.72;
        }
    }
    .name {
        font-size: 38rpx;
        font-weight: bold;
        line-height: 1.5;
    }
    .ms {
        margin-top: 30rpx;
        color: #999999;
    }
    .price {
        margin-top: 44rpx;
    }
}
.cpzs {
    margin-top: 25rpx;
    background: #fff;
    .title {
        color: #141418;
        padding-bottom: 35rpx;
        padding-left: 28rpx;
        padding-top: 28rpx;
        font-size: 36rpx;
    }
}

.share {
    position: absolute;
    right: 50rpx;
    bottom: 50rpx;
    .icon {
        margin-right: 10rpx;
    }
    line-height: 1;
    color: #666;
    font-size: 20rpx;
}

.xbottom {
    width: 750rpx;
    height: 112rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 2rpx solid #f0f0f0;

    .price {
        color: #f62715;
        font-weight: bold;
        font-size: 42rpx;
        .dw {
            font-size: 24rpx;
            color: #999999;
            margin-left: 12rpx;
            font-weight: normal;
            line-height: 1.72;
        }
        margin-left: 36rpx;
    }

    .btn {
        width: 214rpx;
        height: 112rpx;
        background: #ff7e02;
        font-weight: bold;
        font-size: 32rpx;
        color: #fff;
    }
}
</style>
